import React from 'react';
import echarts from 'echarts';
import ReactDOM from 'react-dom';
import './index.less';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'App';
        this.state = {}
    }
    componentDidMount(){
        var dom = ReactDOM.findDOMNode(this)
        this.chart = echarts.init(dom)
        this.chart.setOption(this.props.option,true)
    }
    componentWillReceiveProps(props,prevProps){
        if(props.option)this.chart.setOption(props.option)
    }
    render() {
        return <div className="inu-chart"></div>
    }
}

App.makeOption = function(title,label,series){
    if(!series||!series[0])return;
    if(typeof title=="string"){
        title = {text:title}
    }
    var legend = series.map((item)=>item.name)
    return {
        title : title,
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:legend
        },
        dataZoom: [
            {
                show: true,
                start:33,
            }
        ],
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true},
                dataZoom:{show:true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : label
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value}'
                }
            }
        ],
        series : series
    };
}

export default App
